<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTool>
        <template #after>
          <el-button type="primary" @click="addFn">添加角色</el-button>
        </template>
      </PageTool>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="角色名称" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column label="操作" width="300">
          <template v-slot="{row}">
            <el-button size="small" type="primary" @click="permission(row.id)">分配权限</el-button>
            <el-button size="small" @click="update(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 确认添加弹框组件 -->
      <DaiLog ref="daiLog" :dialog-visible.sync="showDialog" @updateList="getRoleList" />
      <!-- 分页组件 -->
      <el-card>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="changeFn"
          />
        </el-row>
      </el-card>
      <!-- 分配权限弹框 -->
      <DaiLogCheckbox ref="daiLogBox" :visible-dialog.sync="visibleDialog" :user-id.sync="userId" />
    </div>
  </div>

</template>
<script>

import { getRoleList, delRoleList } from '@/api/roleAdmin'
import PageTool from '@/components/PageTool'
import DaiLog from './components/dialog.vue'
import { getRoleListNumber } from '@/api/roleAdmin'
import DaiLogCheckbox from './components/dialogCheckbox.vue'
export default {
  components: { PageTool, DaiLog, DaiLogCheckbox },
  data() {
    return {
      tableData: [],
      limit: 8,
      start: 0,
      total: 0,
      showDialog: false,
      visibleDialog: false,
      userId: 0

    }
  },

  async created() {
    this.getRoleList()
    // console.log('总数', this.$refs.total)
    const res = await getRoleListNumber()
    // console.log('多少条', res)
    this.total = res.data
  },
  methods: {
    // 渲染列表
    async getRoleList() {
      const res = await getRoleList({
        _start: this.start,
        _limit: this.limit
      })
      this.tableData = res.data
    },
    // 编辑
    update(id) {
      this.showDialog = true
      this.$refs.daiLog.editDataList(id)
    },
    // 新增
    addFn(id) {
      this.showDialog = true
    },
    // 删除
    delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async() => {
        await delRoleList(id)
        this.getRoleList()
      }).catch(() => {

      })
    },
    // 分页
    changeFn(page) {
      this.start = (page - 1) * this.limit
      this.getRoleList()
    },
    // 分配权限
    permission(id) {
      this.visibleDialog = true
      this.userId = id
      this.$nextTick(() => {
        this.$refs.daiLogBox.getRoleDet(id)
      })
    }
  }
}
</script>
<style>
.el-table{
  margin-top: 20px;
}
</style>
